import React, { useState } from 'react'
import { Table, Tooltip, Space, Button, Flex } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { updateafter, getafterdetail } from '../../../../request/api'
import Pop_up_layers from './Pop_up_layers'


export default function To_be_reviewed(props) {
  const { afterdata, getid, getall } = props

  const [model_type, setmodel_type] = useState(false)
  const updatmodel_type = (item: boolean) => {
    setmodel_type(item)
  }

  type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
  const columns: TableColumnsType = [
    { title: '发货单号', dataIndex: 'key' },
    { title: '承运时间', dataIndex: 'buy_time' },
    { title: '所属团长', dataIndex: 'order_id' },
    { title: '货物数量', dataIndex: 'user' },
    { title: '运输司机', dataIndex: 'zitidian' },
    { title: '联系方式', dataIndex: 'Refund_amount' },
    { title: '车牌号', dataIndex: 'carnum' },
    { title: '状态', dataIndex: 'car_type' },
    {
      title: '操作',
      key: '_id',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            if (selectedRowKeys.length == 0) {
              alert('请选择订单')
            } else if (selectedRowKeys.length > 1) {
              alert('只能选择一个订单')
            } else {
              Getafterdetail()
            }
          }}>查看 </a>
          <a onClick={() => {
            if (selectedRowKeys.length == 0) {
              alert('请选择订单')
            } else if (selectedRowKeys.length > 1) {
              alert('只能选择一个订单')
            } else {
              Updateafter('已通过')
            }
          }}>通过 </a>
          <a onClick={() => {
            if (selectedRowKeys.length == 0) {
              alert('请选择订单')
            } else if (selectedRowKeys.length > 1) {
              alert('只能选择一个订单')
            } else {
              Updateafter('已驳回')
            }
          }}>驳回 </a>
        </Space>
      ),
    },
  ];




  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  // 数据渲染
  const dataSource = afterdata.filter(item=>item.car_type =='代发货').map((item) => ({
    key: item._id,
    buy_time: item.buy_time,
    order_id: item.groupid.name,
    user: item.shopnum,
    zitidian: item.yunshusiji,
    Refund_amount: item.phone,
    car_type:item.car_type,
    carnum:item.carnum
  }));


  // 选择项
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
    getid(newSelectedRowKeys)
  };
  const rowSelection: TableRowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;




  const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
    setComponentSize(size);
  };



  // 修改状态
  const Updateafter = async (item: string) => {
    let from = {
      list_id: selectedRowKeys,
      item,
    }
    const data: any = await updateafter({ from })
    if (data.code == 200) {
      alert('修改成功')
      getall(data.code)
    }
  }
  // 获取详细数据售后数据
  const [after_data, setafter_data] = useState<any>({})
  const Getafterdetail = async () => {
    setmodel_type(true)
    const res = await getafterdetail({ _id: String(selectedRowKeys[0]) })
    setafter_data(res.data)
  }




  return (
    <div>
      <Flex gap="middle" vertical>
        {/* <Pop_up_layers model_type={model_type} updatmodel_type={updatmodel_type} after_data={after_data}></Pop_up_layers> */}
        <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
      </Flex>
    </div>
  )
}
